<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="login-title">登录系统</h2>
      <el-form ref="loginFormRef" :model="loginInfo" :rules="loginFormRules" >
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user" v-model="loginInfo.username" placeholder="账号" @input="valueIsVlaid('uname')"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="password" v-model="loginInfo.password" prefix-icon="el-icon-lock" show-password  @input="valueIsVlaid('pwd')"></el-input>
        </el-form-item>
        <el-form-item >
          <el-radio v-model="loginInfo.method" :label="0" title="导入了mongodb数据库">数据库验证登录</el-radio>
          <el-radio v-model="loginInfo.method" :label="1" title="没有数据库">本地验证登录</el-radio>
        </el-form-item>
        <el-form-item >
          <el-button class="login-btn" type="primary" @click="login(loginInfo)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginInfo: {
        username: 'songyuening',
        password: 'songyuening',
        method: 0
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 15, message: '请输入正确的账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '请输入正确格式的密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    valueIsVlaid(type) {
      if(type === 'uname') {
        this.loginInfo.username = this.loginInfo.username.trim()
        this.loginInfo.username = this.loginInfo.username.replace(/[\u4e00-\u9fa5]|\s/g, '')
      }else if(type === 'pwd') {
        this.loginInfo.password = this.loginInfo.password.trim()
        this.loginInfo.password = this.loginInfo.password.replace(/[\u4e00-\u9fa5]|\s/g, '')
      }
    },
    login(val) {
      this.$refs.loginFormRef.validate(async valid => {
        if(!valid) return this.$message({ type: 'error', message: '请输入正确的账号或密码！', duration: 2000 })
        const res = await this.$http.post('login', this.loginInfo)
        if(!res.token) return this.$message.error(res.message)
        this.$message.success(res.message)
        window.sessionStorage.setItem('token', 'isTrue')
        this.$store.commit('changeMethod', res.method)
        const defaultHistory = [{
          historyName: '首页',
          path: '/indexPage'
        }]
        sessionStorage.setItem('historys', JSON.stringify(defaultHistory))
        sessionStorage.setItem('activePath', '/indexPage')
        this.$router.push('/home')
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .login-container{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .login-title{
      color: #fff;
      text-align: center;
    }
    .login-box{
      width: 520px;
      padding: 50px;
    }
    .el-input /deep/ .el-input__inner{
      background-color: rgba(0,0,0,.1);
      border-color: rgba(255,255,255,.1);
      height: 50px;
      font-size: 18px;
      color: #fff;
    }
  }
  .login-btn{
    width: 100%;
  }
  .el-radio {
    color: #fff;
  }
</style>
